<template>
	<view>
		<view class="flex padding" v-for="(item,index) in cartList" :key="item.id+'-'+item.idx">
			<view class="flex align-center">
				<text class="iconfont icon-tucenggouxuan margin-right" :class="item.ischeck?'color-yellow':''" @click="handleCheck(index)"></text>
				<image :src="item.img" mode="" class="poster margin-right"></image>
			</view>
			<view class="flex justify-between info">
				<view class="">
					{{item.name}}
					<view class="margin-tb-xs">{{item.french}}</view>
					￥{{item.list[item.idx].price}}
				</view>
				<view class="flex flex-direction align-end">
					<view class="edit margin-bottom-xs" @click="handleEdit(index)">
						<text class="iconfont icon-bianji"></text>
					</view>
					{{item.list[item.idx].spec}} x {{item.num}}
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<u-overlay :show="show" @click="show = false">
			<view class="bg-fff margin cover-cont" @click.stop>
				<view class="padding">
					<view class="flex justify-between info">
						<image src="" mode="" class="poster margin-right"></image>
						<view class="">
							{{cartList[cartIdx].name}}
							<view class="margin-tb-xs">{{cartList[cartIdx].french}}</view>
							￥{{checkedCartInfo.price}}
						</view>
					</view>
					<view class="flex justify-between padding-tb u-border-bottom">
						<view class="">
							规格选择
						</view>
						<view class="drop">
							<view @click="dropShow=true">
								{{checkedCartInfo.spec}} - {{checkedCartInfo.edible}}
								<text class="iconfont icon-xiala"></text>
							</view>
							<view class="drop-list bg-fff" v-if="dropShow">
								<view v-for="(item,index) in cartList[cartIdx].list" class="padding-sm" :key="index" @click="handleDropList(index)">
									{{item.spec}} - {{item.edible}}
								</view>
							</view>
						</view>
					</view>
					<view class="flex justify-between align-center padding-tb-sm u-border-bottom">
						<view class="">
							数量选择
						</view>
						<u-number-box button-size="26" @change="handleNum"></u-number-box>
					</view>
				</view>
				<view class="flex margin-top">
					<button type="default" class="cu-btn lg bg-brown" @click="show=false">取消</button>
					<button type="default" class="cu-btn lg bg-yellow" @click="handleOk">确定</button>
				</view>
			</view>
		</u-overlay>
		<view class="fixed bg-fff flex">
			<view class="flex-sub flex padding align-center">
				<text class="iconfont icon-tucenggouxuan margin-right-xs" :class="allInfo.allCheck?'color-yellow':''" @click="handleAllCheck(allInfo.allCheck)"></text>全选
				<view class="margin-left">
					共计：{{allInfo.allPrice}}.00
				</view>
			</view>
			<view class="bg-yellow padding text-center color-fff" @click="handleOrder">
				立即结算
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations,mapGetters } from 'vuex'
	export default {
		data() {
			return {
				show: false,
				dropShow: false,
				cartIdx: 0, //主商品序号
				dropIdx: 0,   //子商品序号
				num: 1   // 当前弹窗商品数量
			}
		},
		methods: {
			...mapMutations({
				handleCheck: 'cart/cartCheckMut',
				handleAllCheck: 'cart/cartAllCheckMut'
			}),
			handleEdit(idx) {
				this.cartIdx = idx
				this.dropIdx = this.cartList[idx].idx
				this.show = true
			},
			handleDropList(dropIdx) {
				// 子商品下拉列表
				this.dropShow = false
				this.dropIdx = dropIdx
			},
			handleNum({value}) {
				this.num = value
			},
			handleOk() {
				this.show = false
				// 弹窗确定
				let { cartIdx, dropIdx, num } = this
				this.$store.commit('cart/cartListCheckMut',{cartIdx, dropIdx, num})
			},
			handleOrder() {
				uni.navigateTo({
					url: '../order/order'
				})
			}
		},
		computed: {
			...mapState({
				cartList: state => state.cart.cartList,
				userInfo: state => state.user.userInfo
			}),
			...mapGetters({
				allInfo:'cart/allInfo'
			}),
			checkedCartInfo() {
				let {cartIdx,cartList,dropIdx} = this
				return cartList[cartIdx].list[dropIdx]
			}
		},
		onLoad() {
			if(this.userInfo) {
				return
			}
			uni.showModal({
				title: '温馨提示',
				content: '您需要先登录才能进行您的操作',
				cancelText: '稍后再说',
				confirmText: '立即登录',
				success: ({cancel}) => {
					if(cancel){
						uni.navigateBack({
							delta: 1
						})
						return
					}
					uni.navigateTo({
						url: '../user/login'
					})
				}
			})
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 100upx;
	}
.poster {
	width: 180upx;
	height: 180upx;
	background-color: #d8d8d8;
}
.info {
	width: 60%;
	.edit{
		width: 80upx;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		background-color: #e6e6e6;
		border-radius: 50%;
	}
}
.flex.align-end {
	min-width: 210upx;
}
.icon-tucenggouxuan {
	color: #e7e7e7;
}
.cu-btn.lg {
	width: 50%;
}
.cover-cont {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 690upx;
	border-radius: 10upx;
}
.drop {
	position: relative;
	.drop-list {
		width: 300upx;
		position: absolute;
		top: 50upx;
		right: 0;
		box-shadow: 0 0 10upx 2upx rgba(0,0,0,0.2);
		z-index: 10;
		view:hover {
			background-color: #e6e6e6;
		}
	}
}
</style>
